<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div  class="p-30">
    <el-row>
      <span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.list')}}">返  回</a> | 组卷
    </el-row><br>
    
      <el-row>
	  <el-button type="primary"><a style="display:block;color:#fff;text-decoration:none" :href="'/admin/examview/questionadd?id=' + id">添加试题</a> </el-button>
        <el-button type="danger" @click="destorymulti"><span style="display:block;color:#fff;text-decoration:none">批量删除</span></el-button>
      </el-row>

<br>
<h2><span>@{{paper_data.score}}</span>分</h2>
<h5>单选题</h5>
    <template>
        <el-table  :data="examData"  border  style="width: 100%" @selection-change="handleSelectionChange">  
                <el-table-column type="selection" width="50"> </el-table-column> 
                <el-table-column fixed prop="id"  label="ID"  width="80"> </el-table-column>
                <el-table-column prop="score" label="分&ensp;&ensp;数"  sortable width="200"> </el-table-column>
                <el-table-column prop="difficulty" label="难&ensp;&ensp;度"  sortable width="100">
                    <template slot-scope="scope">
                      <el-tag type="primary" v-if="scope.row.difficulty === 1">简单</el-tag>
                      <el-tag type="primary" v-else-if="scope.row.difficulty === 2"
                        >中等</el-tag
                      >
                      <el-tag type="primary" v-else-if="scope.row.difficulty === 3"
                        >难</el-tag
                      >
                      <el-tag type="primary" v-else-if="scope.row.difficulty === 4"
                        >特别难</el-tag
                      >
                   </template>
                </el-table-column>
                <el-table-column prop="exam_content" label="内&ensp;&ensp;容" width=""> </el-table-column>
                <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="380">
                  <template slot-scope="scope">
                      <el-button  @click.native.prevent="deleteRow(scope.$index, scope.row)"  size="mini" type="danger">删  除</el-button>
                  </template>
                </el-table-column>
        </el-table>

    </template>

  </div>

</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return {  
      id:'',
      ids:[],  
      pid:'',  
      alldata:[],
      paper_data: '', //试卷数据
      examData: [], //试题数据
      multipleSelection:[],
    }
  },
  created() {
    this.getUrlKey(),
    this.getquestiondata()
  },

  methods: {
          //获取当前浏览器地址url中的id
          getUrlKey() {
          var url = window.location.href ;             //获取当前url
          var dz_url = url.split('#')[0];              //获取#/之前的字符串
          var cs = dz_url.split('?')[1];               //获取?之后的参数字符串
          var cs_arr = cs.split('&');                  //参数字符串分割为数组
          var cs={};
          for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
            cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
          }
          this.id = cs.id;
          console.log("this.id:"+this.id);
          },
         // 获取列表
          getquestiondata() {    
            let pid = this.id;   
            axios.post('/admin/paper/questions_index',{pid:pid})
            .then(response =>{
                console.log('请求成功：',response.data.data.paper_data);
                this.alldata = response.data.data;
                this.paper_data = response.data.data.paper_data;
                this.examData = response.data.data.exam;
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          }, 
            // 删除列表行
          deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {  
                  let id = this.id                 
                  axios.post('/admin/paper/questions_del',{eid:rows.id,pid:id})
                    .then(response =>{
                     this.getquestiondata()                      
                    }).catch(error =>{
                        console.log('请求失败：' + error);
                    })
                })
          },
          //多选
              handleSelectionChange(val) {
                console.log('var',val);
                let newbox = [];
                for (var i = 0; i < val.length; i++) {
                  newbox.push(val[i].id);
                }
                this.ids = newbox;
              },

           // 批量删除
           destorymulti() {
              if (this.ids == "") {
                this.$message.error("请选择需要删除的数据");
                return;
              }
              this.$confirm("确认操作？", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
              })
                .then(() => {
                  //点击确定按钮的操作
                  if (this.loading) {
                    return;
                  }

                  this.loading = true;
                  let ids = this.ids.join(',')  
                  let id = this.id                  
                    axios.post('/admin/paper/questions_del',{pid:id,eid:ids})
                    .then(() => {
                      this.loading = false;
                      console.log('请求成功：');
                      this.getquestiondata();
                    })
                    .catch((e) => {
                      this.loading = false;
                      console.log('请求失败：' + error);
                    });
                })
                .catch(() => {
                });
            },

        }       

  })

</script>
<style scoped>
  .el-table .el-table__cell:first-child{text-align: center;}
  .el-table .el-table__cell:nth-child(2){text-align: center;}
   a{color:#409EFF;text-decoration: none;}
</style>
</html>

